import React, { useEffect, useState } from "react";
import axios from "../../axios/axios";
import { useParams } from "react-router-dom";
import { marked } from "marked";
import { Input } from "antd";
import { Button, Flex } from "antd";
import { useNavigate } from "react-router-dom";
import { Avatar, Divider, List, Skeleton } from "antd";
import _ from "lodash";
import InfiniteScroll from "react-infinite-scroll-component";
function Xiangqing() {
  const navigate = useNavigate();
  const { TextArea } = Input;
  const { id } = useParams();
  const getxiangq = () => {
    axios({
      url: `http://blogapi.shbwyz.com/article/${id}`,
      method: "GET",
    }).then((res) => {
      console.log(res);
      setList(res.data);
    });
  };
  useEffect(() => {
    getxiangq();
  }, []);
  // 评论内容需要对敏感单词进行过滤，敏感词汇使用*号替代。敏感词汇如:"傻子、笨蛋"等
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any[]>([]);

  const loadMoreData = () => {
    if (loading) {
      return;
    }
    setLoading(true);
    fetch(
      "https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo"
    )
      .then((res) => res.json())
      .then((body) => {
        setData([...data, ...body.results]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMoreData();
  }, []);
  const [list, setList] = useState<any>([]);
  const [value, setValue] = useState("");
  const userId = localStorage.getItem("userId");
  const token = localStorage.getItem("token");
  const fasong = _.debounce(() => {
    if (!token) {
      alert("请先登录");
      navigate("/login");
      return;
    }
    axios({
      url: "http://blogapi.shbwyz.com/discuss",
      method: "POST",
      data: {
        userId: userId,
        content: value,
        articleId: id,
      },
    }).then((res) => {
      console.log(res, "评论内容");
      getxiangq();
      setValue("");
    });
  }, 500);
  const onChange = (e: any) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <h1>文章详情</h1>
      {list && list.content && (
        <div dangerouslySetInnerHTML={{ __html: marked(list.content) }}></div>
      )}
      <TextArea
        showCount
        maxLength={100}
        onChange={onChange}
        value={value}
        placeholder="can resize"
      />
      <Button type="primary" onClick={fasong}>
        发送
      </Button>
      <div>
        {list &&
          list.comments &&
          list.comments.map((item: any) => {
            return (
              <div>
                <p>评论内容：{item.content}</p>
                <p>评论时间：{item.createdAt}</p>
                <p>评论人：{item.user.username}</p>
              </div>
            );
          })}
      </div>
      <div>
        <div
          id="scrollableDiv"
          style={{
            height: 400,
            overflow: "auto",
            padding: "0 16px",
          }}
        >
          <InfiniteScroll
            dataLength={data.length}
            next={loadMoreData}
            hasMore={data.length < 50}
            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
            endMessage={<Divider plain>已全部加载完毕</Divider>}
            scrollableTarget="scrollableDiv"
          >
            <List
              dataSource={data}
              renderItem={(item) => (
                <List.Item key={item.email}>
                  <List.Item.Meta
                    // avatar={<Avatar src={item.picture.large} />}
                    title={<a href="https://ant.design">{item.name.last}</a>}
                    description={item.email}
                  />
                  <div>Content</div>
                </List.Item>
              )}
            />
          </InfiniteScroll>
        </div>
      </div>
    </div>
  );
}

export default Xiangqing;
